<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            text-align: center;
        }

        .content {
            width: 910px;
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
        }

        .content .Left {
            width: 80px;
            height: 450px;
            background-color: #f0f0f0;
        }

        .content .Right {
            width: 800px;
            height: 450px;
            margin-left: 10px;
            background-color: #f0f0f0;
        }

        .Right .top {
            width: 780px;
            height: 250px;
            display: flex;
            justify-content: space-between;
        }

        .Right .top .left {
            width: 40px;
            height: 175px;
            margin-top: 60px;
            margin-left: 5px;
            background-color: gray;
        }

        .Right .top .right table {
            margin-top: 15px;
        }

        .Right .top .right table tr {
            width: 740px;
            height: 40px;
            background-color: #f0f0f0;
        }

        .Right .top .right table tr th {
            width: 100px;
            height: 40px;
            background-color: gray;
            margin: 5px;
        }

        .Right .top .right table tr td {
            width: 100px;
            height: 40px;
            background-color: white;

        }

        .Right .top .right table tr td div {
            margin-left: 15px;
        }

        .Right .bottom {
            width: 790px;
            height: 250px;
            display: flex;
            justify-content: space-between;
        }

        .Right .bottom .left {
            width: 40px;
            height: 175px;
            margin-left: 5px;
            background-color: gray;
        }

        .Right .bottom .right table {
            margin-right: 10px;
        }

        .Right .bottom .right table tr td {
            width: 100px;
            height: 40px;
            background-color: white;

        }

        .Right .bottom .right table tr td div {
            margin-left: 15px;
        }

        .course {
            width: 70px;
            height: 30px;
            cursor: grab;
            margin: 5px;
            text-align: center;
            line-height: 30px;
        }

        .language {
            background-color: #ffcc00;
        }

        .math {
            background-color: #00ccff;
        }

        .English {
            background-color: #ff6600;
        }

        .physics {
            background-color: #00ff66;
        }

        .chemistry {
            background-color: #6600ff;
        }

        .biology {
            background-color: #ff0066;
        }

        .sports {
            background-color: #00ffff;
        }

        .active {
            background-color: gray !important;
        }
    </style>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="app">
        <h3>课程表</h3>
        <div class="content">
            <div class="Left" data-drop="move">
                <div data-effect="copy" draggable="true" class="language course">语文</div>
                <div data-effect="copy" draggable="true" class="math course">数学</div>
                <div data-effect="copy" draggable="true" class="English course">英语</div>
                <div data-effect="copy" draggable="true" class="physics course">物理</div>
                <div data-effect="copy" draggable="true" class="chemistry course">化学</div>
                <div data-effect="copy" draggable="true" class="biology course">生物</div>
                <div data-effect="copy" draggable="true" class="sports course">体育</div>
            </div>
            <div class="Right">
                <div class="top">
                    <div class="left">上午</div>
                    <div class="right">
                        <table>
                            <tr>
                                <th>星期一</th>
                                <th>星期二</th>
                                <th>星期三</th>
                                <th>星期四</th>
                                <th>星期五</th>
                                <th>星期六</th>
                                <th>星期日</th>
                            </tr>
                            <tr>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                            </tr>
                            <tr>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                            </tr>
                            <tr>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                            </tr>
                            <tr>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">下午</div>
                    <div class="right">
                        <table>
                            <tr>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                            </tr>
                            <tr>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                            </tr>
                            <tr>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                            </tr>
                            <tr>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                                <td data-drop="copy"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    source: null,
                    isDragging: false // 新增状态变量，标记是否正在拖拽
                }
            },
            methods: {
                // 拖拽开始事件处理函数
                dragStart(event) {
                    if (this.isDragging) return; // 如果正在拖拽，直接返回
                    // 检查事件目标是否是可拖拽元素
                    if (event.target.tagName.toLowerCase() === 'div') {
                        this.source = event.target;
                        event.dataTransfer.setData('text/plain', '');
                        this.isDragging = true; // 标记为正在拖拽
                    }

                },
                // 拖拽离开事件处理函数
                dragLeave(event) {
                    // if (this.source && event.target === this.source.parentNode) {
                    //     this.source.parentNode.removeChild(this.source); // 移除元素
                    //     this.isDragging = false; // 拖拽结束，重置状态 
                    // }
                    if (this.source) {
                        // 鼠标离开目标元素时移除高亮效果
                        event.target.classList.remove('active');
                    }
                },
                // 拖拽经过事件处理函数
                dragOver(event) {
                    event.preventDefault();
                },
                //拖拽进入事件处理函数
                dragEnter(event) {
                    event.preventDefault();
                    if (event.target.dataset.effect === 'copy') {
                        return;
                    }
                    event.target.classList.add('active'); // 鼠标进入目标元素时添加高亮效果
                },
                // 拖拽放置事件处理函数
                drop(event) {
                    event.preventDefault();
                    event.target.classList.remove('active');
                    if (this.source) {
                        if (event.target.dataset.drop === 'move') {
                            if (event.target === this.source || event.target.contains(this.source)) {
                                return;
                            }
                            event.target.classList.remove('.active')
                            // 从原父元素中移除该元素
                            this.source.parentNode.removeChild(this.source);
                        } else if (event.target.dataset.drop === 'copy') {
                            // 若目标元素有子元素，先移除所有子元素
                            while (event.target.firstChild) {
                                event.target.removeChild(event.target.firstChild);
                            }
                            // 复制源元素并添加到目标元素中
                            event.target.appendChild(this.source.cloneNode(true));
                            event.target.classList.remove('active'); // 鼠标进入目标元素时添加高亮效果
                        }
                    }
                    this.isDragging = false; // 拖拽结束，重置状态
                },
            },
            mounted() {
                // 为可拖拽元素添加拖拽开始事件监听器
                const draggableElements = document.querySelectorAll('[data-effect="copy"]');
                draggableElements.forEach(element => {
                    element.addEventListener('dragstart', this.dragStart);
                });
                // 为可放置元素添加拖拽相关事件监听器
                const droppableElements = document.querySelectorAll('[data-drop="copy"]');
                droppableElements.forEach(element => {
                    element.addEventListener('dragstart', this.dragStart);
                    element.addEventListener('dragover', this.dragOver);
                    element.addEventListener('dragenter', this.dragEnter);
                    element.addEventListener('dragleave', this.dragLeave);
                    element.addEventListener('drop', this.drop);
                });

                const leftElements = document.querySelector('.Left');
                leftElements.addEventListener('dragover', this.dragOver);
                leftElements.addEventListener('dragleave', this.dragLeave);
                leftElements.addEventListener('dragenter', this.dragEnter);
                leftElements.addEventListener('drop', this.drop);

            }
        }).mount('#app');
    </script>
</body>

</html>